<template>
  <div class="page-container">
      <div class="filter-container">
          <div class="filter-item filter-item__separator">
              <span class="filter-item__label">付款时间:</span>
              <div class="filter-item__control">
                  <a-range-picker v-model="creates"  format="YYYY-MM-DD HH:mm:ss"
                                  :showTime="{ hideDisabledOptions: true,
                                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}"/>
                  <a-button  style="margin-left: 5px;" @click="onChangeDate(0)">今</a-button>
                  <a-button  style="margin-left: 5px;" @click="onChangeDate(-1)">昨</a-button>
                  <a-button  style="margin-left: 5px;" @click="onChangeDate(7)">近7天</a-button>
                  <a-button  style="margin-left: 5px;" @click="onChangeDate(30)">近30天</a-button>
              </div>
          </div>
          <div class="filter-item">
              <span class="filter-item__label">订单状态:</span>
              <div class="filter-item__control">
                  <a-select v-model="params.status" placeholder="请选择付款状态" style="width: 200px">
                      <a-select-option value="PAID">待发货</a-select-option>
                      <a-select-option value="UNPAID">未付款</a-select-option>
                      <a-select-option value="DELIVERED">已派单</a-select-option>
                      <a-select-option value="SENT">已送达</a-select-option>
                      <a-select-option value="REFUNDED">已退款</a-select-option>
                      <a-select-option value="CANCEL">已取消</a-select-option>
                  </a-select>
              </div>
          </div>
          <div class="filter-item">
              <span class="filter-item__label">单号:</span>
              <div class="filter-item__control">
                  <a-input placeholder="请输入关键词,例如:订单号" v-model="params.orderNo" @search="onSearch" style="width:200px;"></a-input>
              </div>
          </div>
          <div class="filter-action">
              <a-button type="primary" @click="onSearch">筛选</a-button>
              <a-button class="ant-btn-text" @click="onClear" v-if="isShowClear">清空筛选条件</a-button>
          </div>
      </div>
    <div class="grid-container">
      <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
          <template slot="payAmount" slot-scope="payAmount">
            {{fmMoney(payAmount,2)}}
          </template>
          <template slot="goodsAmount" slot-scope="goodsAmount">
            {{fmMoney(goodsAmount,2)}}
          </template>

          <template slot="createAt" slot-scope="createAt">
              {{formatDate(createAt,'yyyy-MM-dd hh:mm:ss')}}
          </template>
          <template slot="status" slot-scope="status">
              {{onStatusStr(status)}}
          </template>
        <a-table style="padding-left: 7px;" slot="expandedRowRender" slot-scope="record" :columns="innerColumns" :dataSource="record.orderItem"  :rowKey="item => item.id" :pagination="false" :showHeader="false">
            <template slot="name" slot-scope="text,record">
                {{record.name}}({{record.spec}})
            </template>
            <template slot="item" slot-scope="record" >--</template>
        </a-table>
      </a-table>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="12" :order="1" class="tool-action"></a-col>
        <a-col :span="12" :order="2" class="tool-pagination">
          <a-pagination :total="total" v-if="total>params.pageSize" @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
  import {findList} from "../../api/order";
  import {parseTime,fmMoney} from "../../utils/index";
  import moment from 'moment'
  const columns = [
      { title: '订单号', dataIndex: 'orderNo', key: 'orderNo',align:'center',width:180 },
      { title: '消费时间', dataIndex: 'createAt', key: 'createAt' ,align:'center',scopedSlots: { customRender: 'createAt' } ,width:180},
      { title: '商品数量', dataIndex: 'count', key: 'count' ,align:'right',width:180 },
      { title: '商品金额', dataIndex: 'goodsAmount', key: 'goodsAmount' ,align:'right',scopedSlots: { customRender: 'goodsAmount' },width:180},
      { title: '实收金额', dataIndex: 'payAmount', key: 'payAmount' ,align:'right',scopedSlots: { customRender: 'payAmount' },width:180},
      { title: '付款状态', dataIndex: 'status', key: 'status' ,align:'center',scopedSlots: { customRender: 'status' }},
  ];
  const innerColumns = [
      { title: 'name', dataIndex: 'name', key: 'name',align:'right',width:360,scopedSlots: { customRender: 'name' }},
      { title: 'num', dataIndex: 'num', key: 'num',align:'right' ,width:180},
      { title: 'price', dataIndex: 'price', key: 'price' ,align:'right',width:180},
      { title: 'amount', dataIndex: 'amount', key: 'amount',align:'right',width:180},
      {title:'',align:'center',scopedSlots: { customRender: 'item' }},];
  export default {
    data() {
        return {
            dataList: [],
            detailList:[],
            creates:[],
            params:{
                orderNo:'',
                status:undefined,
                begin:'',
                end:'',
                current:1,
                pageSize:10,
            },
            columns,
            innerColumns,
            total:0,
            loading:false,
            isShowClear:false,  //是否显示 清空筛选条件
        }
    },
    methods:{
        moment,
        formatDate(date){
            return parseTime(date,'yyyy-MM-dd HH:mm:ss')
        },
        fmMoney(num){
            return fmMoney(num,2,true);
        },
        onChangeDate(d){
            //今天
            if(d==0) this.creates = [moment('00:00:00', 'HH:mm:ss'),moment('23:59:59', 'HH:mm:ss')];
            //昨天
            if(d==-1) this.creates = [moment('00:00:00','HH:mm:ss').subtract(1, 'days'),moment('23:59:59', 'HH:mm:ss').subtract(1, 'days')];
            //七天
            if(d==7) this.creates = [moment('00:00:00', 'HH:mm:ss').subtract(7, 'days'),moment('23:59:59','HH:mm:ss')];
            //30天
            if(d==30) this.creates =[moment('00:00:00', 'HH:mm:ss').subtract(30, 'days'),moment('23:59:59','HH:mm:ss')];
        },
        onSearch(){
            if(this.creates && this.creates!=null && this.creates.length >0){
                this.params.begin = this.creates[0].format('YYYY-MM-DD HH:mm:ss'),
                this.params.end = this.creates[1].format('YYYY-MM-DD HH:mm:ss');
            }else{
                this.params.begin = '';
                this.params.end = '';
            }
            this.params.current = 1;
            this.isShowClear = true;
            this.onLoad();
        },
        //清空筛选条件
        onClear(){
            this.params = {
                paymentType:undefined,
                orderNo:'',
                begin:'',
                end:'',
                current:1,
                pageSize:10,
            }
            this.onLoad();
            this.isShowClear = false;
        },
        onChange(current){
            this.params.current = current;
            this.onLoad();
        },
        onStatusStr(status){
            let statusStr = '未付款';
            if(status=='PAID')statusStr = '已付款';
            if(status=='REFUNDED')statusStr = '已退款';
            if(status=='CANCEL')statusStr = '已取消';
            return statusStr;
        },
      async onLoad(){
        this.loading = true;
        let resp = await findList(this.params);
          console.log("===resp==",resp);
        this.loading = false;
        if(!this.qUtil.validResp(resp)) return false;
        this.total = resp.data.total;
        this.dataList = resp.data.orderList;
        console.log("dataList",this.dataList);
      }
    },
    mounted(){
        this.onLoad();
    },
  }
</script>

